<template>
  <div :class="{ 'flex-wrap': columns.length > 1 }" :style="{ height: showAreaMaxHeight + 'px' }" class="number-item">
    <template v-for="(item, index) in columns">
      <div v-if="getHide(index)" :key="item" :style="itemStyle" class="item-wrap">
        <p :style="getTitleStyle()" class="item-header">{{ item }}</p>
        <div :style="getContentStyle()" class="item-value">
          <!-- <el-tooltip :content="getValue(index, false)" placement="top">
          <span class="inner-num">{{ getValue(index, true) }}</span>
        </el-tooltip> -->
          <div class="item-value">
            <div v-for="(item, i) in changeValue(index)" :key="i" :style="item === ',' ? {...getContentStyle(), width: commaSty()} :getContentStyle()" class="item">
              <span class="number">{{ item }}</span>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { isNumber } from '@/utils/tools';
import { numberTextFormat, moneyFilter } from '@/filters/number.js';

export default {
  name: 'NumberItemModule',
  props: {
    showAreaMaxHeight: {
      type: Number,
      default: 100
    },
    moduleItemData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    columns: {
      type: Array,
      default: () => []
      // default: () => ['日期', '访问用户', '下单用户', '下单率']
    },
    rows: {
      type: Array,
      default: () => []
    }
  },
  computed: {
    monthOnMonthData() {
      return this.moduleItemData.tableData ? this.moduleItemData.tableData.monthOnMonthData || [] : [];
    },
    yearOnYearData() {
      return this.moduleItemData.tableData ? this.moduleItemData.tableData.yearOnYearData || [] : [];
    },
    monthOnMonthTitle() {
      return this.moduleItemData.tableData ? this.moduleItemData.tableData.monthOnMonthTitle || [] : [];
    },
    yearOnYearTitle() {
      return this.moduleItemData.tableData ? this.moduleItemData.tableData.yearOnYearTitle || [] : [];
    },
    tagsData() {
      return this.moduleItemData.tags || [];
    },
    styleConfig() {
      return this.moduleItemData.styleConfig;
    },
    values() {
      return this.rows && this.rows.length > 0 ? this.rows[0] : [];
    },
    itemStyle() {
      return {
        width: (95 / this.columns.length) + '%'
      };
    }

  },
  methods: {
    getHide(index) {
      let hideTag = true;
      if (this.moduleItemData.tags[index] && this.moduleItemData.tags[index].hideTag === 1) {
        hideTag = false;
      }
      return hideTag;
    },
    getValue(index, format = true) {
      let value = index < this.values.length ? this.values[index] : null;
      const editTargetObj = this.getTarget(index);
      let tail = '';
      if (editTargetObj.editTarget && (value || value === 0) && isNumber(value)) {
        if (editTargetObj.targetData) {
          value = ((value / editTargetObj.targetData) * 100).toFixed(1);
        } else {
          value = 100;
        }
        tail = '%';
        return value + tail;
      }
      if (format) {
        const ans = value || isNumber(value) ? moneyFilter(numberTextFormat(value, 1), false) : '--';
        return ans + tail;
      } else {
        let ans = value || isNumber(value) ? moneyFilter(value, false) : (value || '--');
        if (tail === '%') {
          ans = moneyFilter(ans);
        }
        return ans + tail;
      }
    },
    getTarget(index) {
      if (this.tagsData && this.tagsData[index]) {
        return {
          editTarget: this.tagsData[index].editTarget || 0,
          targetData: this.tagsData[index].targetData || 0
        };
      }
      return {
        editTarget: 0,
        targetData: 0
      };
    },
    getContrastValue(index, type) {
      return this[type] ? this[type][index] || null : null;
    },
    textColor(index, type) {
      if (this.getContrastValue(index, type) < 0) {
        return { color: 'green' };
      } else if (this.getContrastValue(index, type)) {
        return { color: 'red' };
      }
      return {};
    },
    changeValue(index) {
      const moduleNum = this.moduleNumFun();
      let itemValue = this.values[index];
      itemValue = itemValue ? parseInt(itemValue) : 0;
      let value = 0;
      if (itemValue !== 0) {
        if (itemValue.toString().length > moduleNum.number) {
          itemValue = itemValue.toString().substring((itemValue.toString().length - moduleNum.number), itemValue.toString().length);
          value = moneyFilter(itemValue);
          return value.split('');
        } else if (itemValue.toString().length < moduleNum.number) {
          const num = moduleNum.number - itemValue.toString().length;
          let zore = '';
          for (let i = 0; i < num; i++) {
            zore += '0';
          }
          itemValue = zore + itemValue;
          value = moneyFilter(itemValue);
          return value.split('');
        } else {
          value = moneyFilter(itemValue);
          return value.split('');
        }
      } else {
        return [itemValue];
      }
    },
    /**
     * 自定义样式处理
     */
    getTitleStyle() {
      const styleConfig = this.styleConfig;
      let styleObj = {};
      if (styleConfig && styleConfig instanceof Array) {
        // 兼容旧数据
        return this.moduleTitleSy();
      } else if (styleConfig && styleConfig instanceof Object) {
        styleObj = { ...styleConfig.tagTitle };
        styleObj.lineHeight = styleObj.fontSize = styleObj.fontSize + 'px'; // 避免字体造成高度计算错误
        return styleObj;
      } else {
        return {};
      }
    },
    getContentStyle() {
      const styleConfig = this.styleConfig;
      let styleObj = {};
      if (styleConfig && styleConfig instanceof Array) {
        // 兼容旧数据
        return this.moduleTextSy();
      } else if (styleConfig && styleConfig instanceof Object) {
        styleObj = { ...styleConfig.tagContent };
        styleObj.lineHeight = styleObj.fontSize = styleObj.fontSize + 'px'; // 避免字体造成高度计算错误
        return styleObj;
      } else {
        return {};
      }
    },

    moduleNumFun() {
      const moduleNumber = {};
      const styleConfig = this.styleConfig;
      if (styleConfig && styleConfig instanceof Array) {
        this.styleConfig.map(item => {
          if (item.title === '展示位数：') {
            item.config.forEach(val => {
              moduleNumber[val.word] = val.value;
            });
          }
        });
        return moduleNumber;
      } else if (styleConfig && styleConfig instanceof Object) {
        return styleConfig.showBit;
      }
    },
    moduleTitleSy() {
      const moduleTitleStyle = {};
      this.styleConfig.map(item => {
        if (item.title === '标题名称：') {
          item.config.forEach(val => {
            if (val.word === 'fontSize' && val.unit) {
              if (val.value.toString().indexOf('px') === -1) {
                val.value = `${val.value}${val.unit}`;
              }
            }
            moduleTitleStyle[val.word] = val.value;
          });
        }
      });
      return moduleTitleStyle;
    },
    moduleTextSy() {
      const moduleTextStyle = {};
      this.styleConfig.map(item => {
        if (item.title === '内容文字：') {
          item.config.forEach(val => {
            if (val.word === 'fontSize' && val.unit) {
              if (val.value.toString().indexOf('px') === -1) {
                val.value = `${val.value}${val.unit}`;
              }
            }
            moduleTextStyle[val.word] = val.value;
          });
        }
      });
      return moduleTextStyle;
    },
    commaSty() {
      const width = this.getContentStyle().fontSize.replace('px', '');
      return Number(width) / 4 + 'px';
    }
  }
};
</script>

<style lang="scss" scoped>
.inner-num {
  display: inline-block;
}
.number-item {
  display: flex;
  &.flex-wrap {
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: space-between;
  }
  .item-header {
    font-size: 20px;
    font-weight: bolder;
    color: rgba(153, 153, 153, 1);
    margin: 0 0 16px;
  }
  .item-value {
    font-size: 32px;
    font-weight: 500;
    color: rgba(51, 51, 51, 1);
    // margin: 15px 0 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .item {
      margin-right: 6px;
      flex-shrink: 0;
      .number {
        top: 50%;
        left: 50%;
        transform:translate(-50%,-50%);
        font-weight: bolder;
        z-index: 100;
      }
    }
  }
}
</style>
